<template>
    <div class="hello he poa">
        <Transition name="router">
            <router-view />
        </Transition>
        <div class="home-router">
            <div v-for="item, index in arr" @click="tab(item.path)">
                <img :src="path == item.path ? item.src1 : item.src">
                <span :class="{ 'color': path == item.path }">{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr: [
                {
                    title: '首页',
                    src: 'http://43.138.15.137:8085/static/tabbar/index.png',
                    src1: 'http://43.138.15.137:8085/static/tabbar/indexed.png',
                    path: '/home',
                },
                {
                    title: '动态',
                    src: 'http://43.138.15.137:8085/static/tabbar/news.png',
                    src1: '	http://43.138.15.137:8085/static/tabbar/newsed.png',
                    path: '/news',
                },
                {
                    title: '消息',
                    src: 'http://43.138.15.137:8085/static/tabbar/paper.png',
                    src1: '	http://43.138.15.137:8085/static/tabbar/papered.png',
                    path: '/msg',
                },
                {
                    title: '我的',
                    src: 'http://43.138.15.137:8085/static/tabbar/home.png',
                    src1: 'http://43.138.15.137:8085/static/tabbar/homeed.png',
                    path: '/my',
                },
            ],
            path: '',
        }
    },
    methods: {
        tab(path) {
            this.$router.push({ path: path })
            this.path = path
        }
    },
    created() {
        this.path = this.$route.path
    },
}
</script>

<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.router-enter-active {
    animation: shadow 0.2s ease;
}

.router-leave-active {
    animation: shadow 0.2s ease reverse;
}

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.home-router {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: r(50);
    z-index: 100;
    border-top: 1px solid #eee;
    background-color: #fff;

    .color {
        color: rgb(252, 92, 130);
    }

    div {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: center;
        flex: 1;
        justify-content: center;

        img {
            width: r(24);
            height: r(24);
            margin-top: r(3);
        }

        span {
            margin-top: r(3);
            font-size: r(10);
            color: #333;
        }
    }
}
</style>
